<template>
    <div class="wrapper">
        <p>
            Hello {{ name }}
        </p>
        <ul>
            <li v-for="item in items" :key="item.id" @click="itemClick(item)">{{ item.name }}</li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'Shared',
    props:['name','items'],
    data(){
        return {
            items:this.props.items,
            name:this.props.name
        }
    },
    methods:{
        itemClick(item){
            alert('clicked ' + item.name)
        }
    }
}
</script>

<style>
.wrapper{
    width: 200px;
    height: 200px;
    background-color: white;
}
li{
    text-align: left;
    padding-top: 6px;
    padding-bottom: 6px;
    border-style: dotted;
    border-width:1px;
    border-color: blueviolet; 
    text-align: center;
}
ul{
    list-style-type: none;
    padding-left: 0px;
}
</style>

